<template>
	<!-- 人工入账 -->
	<div class="financeManualentry" v-loading="loading">
		<h3>人工入账</h3>
		<AreaWarp :padding="true">
	        <SearchWarp :label="'姓名'">
	        	<el-input v-model.trim="searchInfo.realName"    placeholder="请输入用户姓名"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'手机号'">
	          <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'放款时间'">
	          	<el-date-picker v-model="searchInfo.time" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <BtnWarp>
	          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
	          <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
	        </BtnWarp>
	     </AreaWarp>

	   	<AreaTitleWarp :title="'订单列表'">
          	
      	</AreaTitleWarp>

      <!--搜索结果区域-->
      <AreaWarp :padding="false">
        <el-table :data="tableInfo.list" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
          tooltip-effect="dark"   
        >
          <el-table-column prop="id" label="订单ID" min-width="120"></el-table-column>
          <el-table-column prop="appId" label="产品" min-width="120" :formatter="formatter_product"></el-table-column>
          <el-table-column prop="realname" label="姓名" min-width="120"></el-table-column>
          <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
          <el-table-column prop="realCapital" label="放款本金" min-width="120"></el-table-column>
          <el-table-column prop="payTime" label="放款时间" min-width="180" :formatter="formatter_timeYMDHMS"></el-table-column>
          <el-table-column prop="lastRepayDay" label="到期时间" min-width="180" :formatter="formatter_timeYMDHMS"></el-table-column>
          <el-table-column prop="totalPrice" label="逾期金额" min-width="180"></el-table-column>
          <el-table-column prop="repayPirce" label="已还款金额" min-width="180"></el-table-column>
          <el-table-column prop="borrowId" label="操作" min-width="120">
          	<template slot-scope="scope">
          		<el-button type="text" size="small" @click="entryMoney(scope.row)">人工入账</el-button>
          	</template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total,sizes,prev, pager, next, jumper" class="pub-page"
          :current-page="searchInfo.page"
          :page-sizes="[20,50,100]"
          :page-size="searchInfo.size"
          :total="tableInfo.total"
          @current-change="search"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </AreaWarp>

      <el-dialog  title="人工入账" :visible.sync="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="50%" @close="entryCancel">
		  <div class="dialog-body" >
		  	<ul class="body-message" v-if="entryMoneyData">
		  		<li>
		  			<span class="span1">借款本金:</span>
		  			<span class="span2">{{ entryMoneyData.realCapital }}</span>
		  		</li>
		  		<li>
		  			<span class="span1">逾期金额:</span>
		  			<span class="span2">{{ entryMoneyData.totalPrice }}</span>
		  		</li>
		  		<li>
		  			<span class="span1">已还款金额:</span>
		  			<span class="span2">{{ entryMoneyData.repayPirce }}</span>
		  		</li>
		  	</ul>
		  	<ul class="body-operation">
		  		<li>
		  			<span class="span1">人工入账金额:</span>
		  			<span class="span2">
		  				<el-input v-model="entryData.thisAmount" placeholder="请输入金额"></el-input>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">还款方式:</span>
		  			<span class="span2">
		  				<el-select v-model="entryData.payType" placeholder="请选择">
						    <el-option
						      v-for="item in payTypeOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  				
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">是否操作结案:</span>
		  			<span class="span2">
		  				<el-checkbox v-model="entryData.payFlag"></el-checkbox>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">还款时间:</span>
		  			<span class="span2">
		  				<el-date-picker
					      	v-model="entryData.repaySuccessTimestamp"
					      	type="datetime"
					      	placeholder="选择日期时间">
					    </el-date-picker>
		  			</span>
		  			
		  		</li>
		  		<li>
		  			<span class="span1">备注:</span>
		  			<span class="span2">
		  				<el-input
		  					maxlength="20"
						  type="textarea"
						  :rows="2"
						  placeholder="请输入内容"
						  v-model="entryData.remark">
						</el-input>
		  			</span>
		  		</li>
		  	</ul>

		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="entryCancel">取 消</el-button>
		    <el-button type="primary" @click="entrySure">确 定</el-button>
		  </span>
	  </el-dialog>


	</div>
</template>
<script>
	import Finance  from '../../../assets/js/finance.js'
	export default({
		data(){
			return{
				searchInfo:{
					realName: '',
					mobile: '',
					time: '',
					size:50,
					page:1,
				},
				loading: false,
				statusOptions:[],
				payTypeOptions:[
					{
						value: 2,
						label: "支付宝"
					},{
						value: 3,
						label: "微信"
					},{
						value: 1,
						label: "银行卡"
					},
				],
				tableInfo:{
					list:[],
					total: 0,
					page: 0,
					size: 0
				},
				dialogVisible: false,
				entryMoneyData: null,
				entryData:{
					remark: '',
					repaySuccessTimestamp:'',
					payFlag: false,
					payType: 2,
					thisAmount: ''
				}
			}
		},
		methods:{
			handleSizeChange(val){
				let that = this;
				that.searchInfo.size = val;
            	that.searchInfo.page = 1;
            	that.search()
			},
			search(currentPage){
				let that = this;
				that.searchInfo.page = typeof currentPage == 'number' ? currentPage : 1;
				let x = {
					realName: that.searchInfo.realName,
					mobile: that.searchInfo.mobile,
					size: that.searchInfo.size,
					page: that.searchInfo.page,
					time: that.searchInfo.time
				}
				let finance = new Finance(x)
				let reqData = finance.getState()
				if(reqData.code){
					that.showMsg(reqData.message,'error')
					return 
				}
				
				that.loading = true;
				that.ajaxJson({
		          url: '/finance/list',
		          data: reqData,
		          success: function (res) {
		            if (res.code == '0') {
		            	that.tableInfo = res.data;
		            }
		            that.loading = false;

		          }
		        })	
			},
			reset(){
				let that = this;
				that.searchInfo = {
					realName: '',
					mobile: '',
					time: '',
					size:50,
					page:1,
				}
				that.search();
			},
			entryMoney(row){
				// 入账弹框
				let that = this;
				that.entryMoneyData = row;
				that.dialogVisible = true;
			},
			entryCancel(){
				let that = this;
				that.entryMoneyData = null;
				that.entryData = {
					remark: '',
					payFlag: false,
					payType: 2,
					thisAmount: '',
					repaySuccessTimestamp: '',
				}
				that.dialogVisible = false;
			},
			entrySure(){
				let that = this;
				if(!/^[0-9]+(.[0-9]{1,2})?$/.test(that.entryData.thisAmount)){
					that.showMsg("请输入正确的金额","error")
					return
				}
				let payFlag = 0;
				if(that.entryData.payFlag){
					payFlag = 1
				}else{
					payFlag = 0
				}

				let repaySuccessTimestamp = [];
				if(!that.entryData.repaySuccessTimestamp){
					that.showMsg("请选择时间","error")
					return
				}else{
					repaySuccessTimestamp = that.entryData.repaySuccessTimestamp.getTime()
				}
				let addX = {
					borrowId: that.entryMoneyData.id,
					mobile: that.entryMoneyData.mobile,
					userId: that.entryMoneyData.userId,
					userName: that.entryMoneyData.realname,
					thisAmount: that.entryData.thisAmount,
					payType: that.entryData.payType,
					repaySuccessTimestamp: repaySuccessTimestamp,
					payFlag: payFlag,
					remark: that.entryData.remark,
				}
				
				that.ajaxJson({
		            url: '/finance/add',
		            data: addX,
		            success: function (res) {
		                if (res.code == '0') {
		            	    that.$message({
				                type: 'success',
				                message: '入账成功!'
				            });
				            that.entryData = {
								remark: '',
								payFlag: false,
								payType: 2,
								thisAmount: '',
								repaySuccessTimestamp: ''
							}
							that.dialogVisible = false;
							that.entryMoneyData = null;
		            	    that.search();
		                }
		            }
			    })
			}
		},
		created(){
			let that = this;
			that.search();
		},
		beforeCreate(){
			let that = this;

		}
	})
</script>
<style lang="less">
	.financeManualentry{
		.inputWidth{
			width:120px;
		}
		.dialog-body{
			width:100%;
			.body-message{
				width:100%;
				overflow: hidden;
				li{
					width:33.3%;
					float: left;
					line-height: 30px;
					.span1{
						color:#999;
					}
					.span2{
						color:#000;
					}
				}
			}
			.body-operation{
				margin-top:20px;
				li{
					display: flex;
					line-height: 40px;
					margin-bottom: 10px;
					.span1{
						width:120px;
						flex:none;
						color:#999;
						text-align: right;

					}
					.span2{
						flex:1;
						margin-left: 20px;
						.el-input{
							width:50% !important;
						}
						.el-select{
							.el-input{
								width:100% !important;
							}
						}
						.el-input__inner{
							width:100%;
							height:36px;
							padding:0 5px;
						}
						.el-input--prefix{
							.el-input__inner{
								padding-left: 30px;
							}
						} 
						.el-checkbox__inner{
							
						}
						.el-input__prefix{

						}
					}
				}
			}
		}
	}
</style>